<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-primary mb-8">主题色演示</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
      <!-- 主色调 -->
      <div class="bg-primary text-white p-6 rounded-lg shadow-md">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">主色调 (Primary)</h2>
          <span class="text-sm bg-white/20 px-2 py-1 rounded">#3B82F6</span>
        </div>
        <p>用于主要按钮、链接和突出显示的内容。</p>
        <button
          class="mt-4 px-4 py-2 bg-white text-primary rounded-md hover:bg-gray-100 transition-colors"
        >
          主按钮示例
        </button>
      </div>

      <!-- 辅助色 -->
      <div class="bg-secondary text-white p-6 rounded-lg shadow-md">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">辅助色 (Secondary)</h2>
          <span class="text-sm bg-white/20 px-2 py-1 rounded">#10B981</span>
        </div>
        <p>用于成功状态、确认按钮和辅助操作。</p>
        <button
          class="mt-4 px-4 py-2 bg-white text-secondary rounded-md hover:bg-gray-100 transition-colors"
        >
          辅助按钮示例
        </button>
      </div>

      <!-- 强调色 -->
      <div class="bg-accent text-white p-6 rounded-lg shadow-md">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">强调色 (Accent)</h2>
          <span class="text-sm bg-white/20 px-2 py-1 rounded">#8B5CF6</span>
        </div>
        <p>用于强调重要信息、特殊按钮和交互元素。</p>
        <button
          class="mt-4 px-4 py-2 bg-white text-accent rounded-md hover:bg-gray-100 transition-colors"
        >
          强调按钮示例
        </button>
      </div>

      <!-- 深色 -->
      <div class="bg-dark text-white p-6 rounded-lg shadow-md">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">深色 (Dark)</h2>
          <span class="text-sm bg-white/20 px-2 py-1 rounded">#1F2937</span>
        </div>
        <p>用于深色背景、文本和UI元素。</p>
        <button
          class="mt-4 px-4 py-2 bg-white text-dark rounded-md hover:bg-gray-100 transition-colors"
        >
          深色按钮示例
        </button>
      </div>

      <!-- 浅色 -->
      <div
        class="bg-light text-dark p-6 rounded-lg shadow-md border border-gray-200"
      >
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">浅色 (Light)</h2>
          <span class="text-sm bg-dark/10 px-2 py-1 rounded">#F9FAFB</span>
        </div>
        <p>用于浅色背景和中性UI元素。</p>
        <button
          class="mt-4 px-4 py-2 bg-dark text-white rounded-md hover:bg-gray-700 transition-colors"
        >
          浅色背景按钮示例
        </button>
      </div>

      <!-- 颜色组合示例 -->
      <div
        class="bg-gradient-to-br from-primary to-accent text-white p-6 rounded-lg shadow-md"
      >
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold">颜色组合</h2>
          <span class="text-sm bg-white/20 px-2 py-1 rounded">渐变效果</span>
        </div>
        <p>展示如何组合不同主题色创建渐变和复杂效果。</p>
        <button
          class="mt-4 px-4 py-2 bg-white text-primary rounded-md hover:bg-gray-100 transition-colors"
        >
          组合效果示例
        </button>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
      <h2 class="text-2xl font-bold text-dark mb-4">主题色使用指南</h2>
      <ul class="list-disc pl-5 space-y-2 text-gray-600">
        <li>
          使用
          <code class="bg-gray-100 px-1 py-0.5 rounded text-primary"
            >bg-primary</code
          >
          作为主要按钮和关键交互元素的背景色
        </li>
        <li>
          使用
          <code class="bg-gray-100 px-1 py-0.5 rounded text-secondary"
            >text-secondary</code
          >
          标记成功状态和确认消息
        </li>
        <li>
          使用
          <code class="bg-gray-100 px-1 py-0.5 rounded text-accent"
            >border-accent</code
          >
          突出显示重要输入框和卡片
        </li>
        <li>
          使用
          <code class="bg-gray-100 px-1 py-0.5 rounded text-dark"
            >bg-dark/10</code
          >
          创建微妙的阴影和层次感
        </li>
        <li>
          在深色背景上使用
          <code class="bg-gray-100 px-1 py-0.5 rounded text-light"
            >text-light</code
          >
          确保良好的可读性
        </li>
      </ul>
    </div>

    <div class="flex justify-center">
      <button
        class="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors shadow-md mr-4"
      >
        主要操作按钮
      </button>
      <button
        class="px-6 py-3 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-colors shadow-md mr-4"
      >
        成功确认按钮
      </button>
      <button
        class="px-6 py-3 bg-accent text-white rounded-md hover:bg-accent/90 transition-colors shadow-md"
      >
        特殊强调按钮
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 未使用i18n，已移除相关代码
</script>

<style scoped>
code {
  font-family: monospace;
  font-size: 0.9em;
}
</style>
